<template>
  <van-tabs @click="tabClick">
    <van-tab v-for="(item,index) in titles" :key="item.id" :title="item" :name="index"></van-tab>
  </van-tabs>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab).use(Tabs);
export default {
  data() {
    return {
      currentIndex: 0
    }
  },
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    tabClick(name) {
      this.currentIndex = name;
      this.$emit('tabClick', name)
    }
  }
};
</script>

<style lang="less" scoped>
.van-tabs {
  position: sticky;
  top: 46px;
  z-index: 9;
}
/deep/.van-tabs__line {
  background-color: var(--color-high-text);
}
/deep/.van-tab--active {
  color: var(--color-high-text);
}
</style>